<template>
  <div style="width: 100%">
    <avue-crud :option="{...option,header:true,column}"
               :table-loading="loading"
               :data="data"
               ref="crud">
      <template slot="menuLeft">
        <el-button size="medium" type="primary" :disabled="disabled" @click="$refs['gdcd'].open(data)">
          选择已有的
        </el-button>
        <el-button size="medium" type="danger" :disabled="disabled" @click="remove">清空</el-button>
      </template>
    </avue-crud>

    <get-data-common-dialog title="选择状态"
                            ref="gdcd"
                            id-key="id"
                            limit="1"
                            :isPage="false"
                            :column="column"
                            url="/api/state-api/client/life-cycle-pull-list"
                            @addToList="addToList">
    </get-data-common-dialog>
  </div>
</template>
<script>
import GetDataCommonDialog from "@/views/DMDComponent/getDataCommonDialog.vue";

export default {
  name: "stateRules",
  components: {GetDataCommonDialog},
  inject: ["dialogType", "allFormData"],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    },
  },
  data() {
    return {
      loading: false,
      data: [],
      column: [
        {
          label: "英文名称",
          prop: "nameEn",
        },
        {
          label: '中文名称',
          prop: 'nameCn',
        },
        {
          label: "英文描述",
          prop: "describeEn",
        },
        {
          label: "中文描述",
          prop: "describeCn",
        },
        {
          label: "初始化",
          prop: "initialStateName",
        },
        {
          label: "状态列表",
          prop: "stateList",
        },
      ]
    }
  },
  computed: {
    disabled() {
      return this.dialogType() === 'view';
    }
  },
  methods: {
    addToList(list) {
      this.data = list;
      this.$refs['gdcd'].close();
    },
    remove() {
      this.data = [];
    },
    getData() {
      let obj = {interfaceId: this.item.oid ? this.item.oid : this.item.interfaceId, settingsJson: ""};
      if (this.data.length > 0) {
        obj.settingsJson = JSON.stringify(this.data[0]);
      }
      return {data: [obj], isNull: this.data.length === 0, flag: true};
    }
  },
  watch: {
    show: {
      handler() {
        this.data = [];
        let formData = this.deepCopy(this.allFormData().functionInterfaces);
        if (formData.length > 0) {
          formData.forEach(item => {
            if (item.oid === this.item.oid || item.oid === this.item.interfaceId) {
              if (!!item.settingsJson) {
                this.data = [JSON.parse(item.settingsJson)];
              }
            }
          })
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
